<!--
 * @Author: delin66
 * @Date: 2024-12-04 22:22:11
 * @LastEditors: delin66
 * @LastEditTime: 2024-12-13 22:30:44
 * @Descripttion: 
-->
<template>
	<div class="container">
		<el-dialog :model-value="dialogVisible" width="25%" :before-close="handleClose">
			<template #header>
				<h3>{{ '会议详情' }}</h3>
			</template>
			<!-- 具体内容 -->
			<el-descriptions :column="1" border>
				<template #title>
					<!-- <div class="task-title">{{ taskTitle }}</div> -->
				</template>
				<el-descriptions-item label="主持人" min-width="90">{{ taskInfo.createBy }}</el-descriptions-item>
				<el-descriptions-item label="会议时间">{{ taskStartTime }} - {{ taskEndTime }}</el-descriptions-item>
				<el-descriptions-item label="会议备注"> {{ taskInfo.remark ? taskInfo.remark:"暂无备注"  }} </el-descriptions-item>
				<el-descriptions-item label="会议状态">{{ taskInfo.status}}</el-descriptions-item>
				
			</el-descriptions>
			<el-button class="bt" type="danger" v-if="flag" @click="cancel">取消预约</el-button>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import dayjs from 'dayjs';
import { getLoginUserId } from '@/utils/storage';
import { useRoomReserveStore } from '@/store/roomReserve';

// 接收父组件传值
const props = defineProps(['dialogVisible', 'detailInfo']);
const emits = defineEmits(['update:dialogVisible']);
const useRoomReserve = useRoomReserveStore();
const taskInfo =ref()
const taskStartTime = ref('');
const taskEndTime = ref('');
const flag = ref(false);
const reserveId = ref(0);

watch(
	() => props.detailInfo,
	(newValue) => {
		reserveId.value = newValue._def.publicId;
		taskInfo.value = newValue.extendedProps
		taskStartTime.value = dayjs(newValue.start).format('YYYY-MM-DD HH:mm:ss');
		taskEndTime.value = dayjs(newValue.end).format('YYYY-MM-DD HH:mm:ss');
		const userId = newValue.extendedProps.userId;
		const myId = getLoginUserId();
		flag.value = userId === myId;
		console.log(newValue);
		console.log(newValue.extendedProps);
	}
);

const cancel = () => {
	// 取消预约
	useRoomReserve.cancelReserve(reserveId.value,2)
  handleClose()
};
/**
 * 弹窗关闭时操作
 */
const handleClose = () => {
	emits('update:dialogVisible', false);
};
</script>
<style lang="scss" scoped>
.task-title::before{
  content: '';
  width: 6px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  background: #409eff;
  margin-right: 8px;
  border-radius: 10px;
}
.task-title{
  vertical-align: middle;
}
:deep(.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body) {
	padding: 0 !important;
}
:deep(.el-overlay) {
	z-index: 9999 !important;
}
.bt {
	margin-top: 20px;
	width: 100%;
}
</style>

